<template>
  <div class="container">
    <el-card>
      <!-- 搜索 -->
      <el-row>
        <el-col :span="21">
          <div class="search-left">
            <el-form :inline="true">
              <el-form-item label="目录名称" style="margin-right:30px">
                <el-input v-model="formData.directoryName"></el-input>
              </el-form-item>
              <el-select label="状态" v-model="formData.state" placeholder="请选择">
                <el-option v-for="item in stateType" :key="item.id" :label="item.value" :value="item.id"></el-option>
              </el-select>
              <el-form-item>
                <el-button @click="resetForm">清除</el-button>
                <el-button type="primary" @click="doSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="search-right">
            <el-button type="success" @click="doAdd">新增目录</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 数据通知 -->
      <el-alert
    :title = "`数据一共${tableData.length}条`"
    type="info"
    show-icon
    :closable="false">
  </el-alert>
      <!-- 渲染表格 -->
      <div class="table">
        <el-table :data="tableData">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="目录名称" prop="directoryName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期"  fit>
          <template v-slot="scope">
            {{timeTra(scope.row.addDate)}}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"></el-table-column>
        <el-table-column label="状态">
          <template v-slot="scope">
            {{stateTra(scope.row.state)}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-link type="primary" :underline="false" style="margin-right:10px" @click="btnUser(scope.row)">{{btnTra(scope.row.state)}}</el-link>
            <el-link type="primary" :underline="false" style="margin-right:10px" :disabled="scope.row.state===0" @click="doEdit(scope.row)">修改</el-link>
            <el-link type="primary" :underline="false" :disabled="scope.row.state===0" @click="doDelete(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
      @size-change="SizeChange"
      @current-change="CurrentChange"
      :current-page="pages.page"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pages.pagesize"
      layout="prev, pager, next, sizes, total, jumper"
      :total="total">
    </el-pagination>
      </div>
      <!-- 新增弹框 -->
      <el-dialog :title="isEdit?'修改目录':'新增目录'" :visible.sync="showDialog" @close="closeDialog"  width="35%">
        <el-form label-width="100px" :model="dialogData" :rules="rules" ref="dialogRef">
          <el-form-item  label="所属学科" prop="subjectID">
          <el-select v-model="dialogData.subjectID">
            <el-option v-for="item in subjectData" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="dialogData.directoryName" style="width:223.67px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click="doSubmit">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, add, changeState, remove, detail, update } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import constant from '@/constant/index.js'
export default {
  data () {
    return {
      pages: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      stateType: constant.stateType,
      formData: {
        directoryName: '',
        state: null
      },
      total: 1,
      showDialog: false,
      subjectData: [],
      isEdit: false,
      dialogData: {
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [{ required: true, message: '不能为空', trigger: 'blur' }],
        directoryName: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.tableList()
  },
  methods: {
    // 获取目录列表
    async tableList () {
      const res = await list(this.pages)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    CurrentChange (page) {
      this.pages.page = page
      this.tableList()
    },
    SizeChange (size) {
      this.pages.pagesize = size
      this.tableList()
    },
    // 状态格式转换
    stateTra (state) {
      if (state === 0) {
        return '已禁用'
      } else if (state === 1) {
        return '已启用'
      } else {
        return '未知'
      }
    },
    // 清空表单
    resetForm () {
      this.formData = {
        directoryName: '',
        state: null
      }
      this.tableList()
    },
    // 筛选
    async doSearch () {
      const res = await list(this.formData)
      this.tableData = res.data.items
    },
    // 新增目录
    doAdd () {
      this.isEdit = false
      this.showDialog = true
      this.getSubject()
    },
    // 获取所属学科列表
    async getSubject () {
      const res = await simple()
      this.subjectData = res.data
    },
    // 修改按钮
    async doEdit (data) {
      this.isEdit = true
      this.showDialog = true
      this.getSubject()
      const res = await detail(data)
      this.dialogData = res.data
    },
    // 确认提交按钮
    async doSubmit () {
      if (this.isEdit) {
        await update(this.dialogData)
        this.tableList()
        this.$message.success('修改成功')
        this.showDialog = false
      } else {
        try {
          await add(this.dialogData)
          this.$message.success('新增成功')
          this.showDialog = false
          this.tableList()
        } catch (error) {
          this.$message.error(error)
        }
      }
    },
    // 时间转换
    timeTra (time) {
      const newTime = time.replace('T', ' ')
      return newTime.replace('.000Z', '')
    },
    // 点击禁用按钮，实现功能
    async btnUser (row) {
      // row.state === 0 ? this.showBtn = true : this.showBtn = false
      // this.showBtn = false
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      await changeState({ id: row.id, state: row.state })
    },
    // 转换按钮
    btnTra (state) {
      if (state === 0) {
        return '启用'
      } else if (state === 1) {
        return '禁用'
      }
    },
    // 删除按钮
    doDelete (data) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.tableList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭弹窗，清空表单
    closeDialog () {
      this.dialogData = {
        subjectID: '',
        directoryName: ''
      }
    }
  }
}
</script>

<style scoped>
.table{
  margin-top: 15px;
}
.pagination{
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
